<template>
  <div class="infinite-container cancel-order">
    <div class="cancel-order-top bgwhite">
      <mu-divider></mu-divider>
      <div class="pd20">
        {{person.personName}} &nbsp;&nbsp;&nbsp;
        <small>{{person.certificate.certificateNo}}</small>
      </div>
       
      <div class="t3 cancel-content">
        <mu-divider></mu-divider>
        <div class="mt10">{{currentOrder.doctorName}}</div>
        <div class="mt10">{{currentOrder.regDeptName}}</div>
        <div class="mt10">{{currentOrder.workDate + ['', ' 上午 ', ' 下午 '][currentOrder.planTime] + currentOrder.startTime + '-' + currentOrder.endTime}}</div>
      </div>
      <mu-divider></mu-divider>
    </div>

    <div class="cancel-order-bottom mt10 bgwhite">
      <mu-divider></mu-divider>
      <div class="title">
        <i class="t1 iconfont icon-sanjiaoxingshixin"></i> 
        取消预约原因</div>
      <mu-divider></mu-divider>
        <mu-row v-for="(r, i) in CANCEL_ORDER_RESIONS" :key="r">
          <mu-col width="80" @click.native="radioResion=String(i+1)">
              {{r}}
          </mu-col>
          <mu-col width="20">
              <mu-radio name="group" :nativeValue="String(i+1)" v-model="radioResion" />
          </mu-col>
          <mu-divider></mu-divider>
        </mu-row>
        
    </div>
    <div class="login pd20">
          <mu-raised-button label="确定" fullWidth primary class="btn-login" @click="cancelOrder"></mu-raised-button>
        </div>
  </div>
</template>

<script>
import {CANCEL_ORDER_RESIONS} from '../../common/js/message'
import {commonAjax, PRODUCT_ID, PLATFORM_PREFIX} from '../../api/api'
export default {
  mounted () {
    this.$store.commit('UPDATE_TITLE', '取消挂号')
  },
  data () {
    return {
      person: JSON.parse(localStorage.person),
      currentOrder: JSON.parse(localStorage.currentOrder),
      CANCEL_ORDER_RESIONS: CANCEL_ORDER_RESIONS,
      radioResion: '1'
    }
  },
  methods: {
    cancelOrder () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax([
        PRODUCT_ID,
        this.currentOrder.registrationId,
        CANCEL_ORDER_RESIONS[this.radioResion - 1],
        1
      ], `${PLATFORM_PREFIX}.registrationService`, 'cancelRegistration ').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          this.$store.commit('UPDATE_TOAST', {
            message: '手机挂号取消成功',
            fn: () => this.$router.replace('/appointment/history')
          })
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
        console.log(res)
      })
    }
  }
}
</script>

<style lang="less">
.cancel-order {
  .cancel-content {
    margin:0 20px 20px;
  }
  .cancel-order-bottom {
    .title {
      line-height: 2;
      padding-left: 10px;
      .iconfont {
        font-size: 16px;
      }
    }
    .col {
      padding: 1em;
      &.col-80 {padding-left: 2em;}
      &.col-20 {text-align: right;}
    }
  }
}
</style>
